<template>
  <div class="home">
    <div>首页内容</div>

    <a-button type="primary" @click="showAuthModal">
      打开登录注册 modal
    </a-button>
    <a-modal v-model="is_auth_modal_visible"
             title="登录注册"
             :footer="null"
             :width='420'
    >
      <phone-login-form v-if='active_auth_form_name === constants.phone_login_form' />
      <password-login-form v-else-if='active_auth_form_name === constants.password_login_form' />
      <register-form v-else />

      <a-button type='link'
                @click='switchAuthForm(constants.phone_login_form)'
                @form-submitted-successful='handleFormSubmittedSuccessful'
                v-if='active_auth_form_name === constants.password_login_form'
      >使用手机号登录
      </a-button>
      <a-button type='link'
                @click='switchAuthForm(constants.password_login_form)'
                @form-submitted-successful='handleFormSubmittedSuccessful'
                v-else
      >使用帐号密码登录
      </a-button>
      <a-button type='link'
                class='pull-right'
                @click='switchAuthForm(constants.register_form)'
                @form-submitted-successful='handleFormSubmittedSuccessful'
                v-if='active_auth_form_name !== constants.register_form'
      >立即注册</a-button>

    </a-modal>


  </div>
</template>

<script>
  import PhoneLoginForm from '@/components/PhoneLoginForm.vue'
  import PasswordLoginForm from '@/components/PasswordLoginForm.vue'
  import RegisterForm from '@/components/RegisterForm.vue'
  import constants from '@/constants'

  export default {
    name: 'Home',
    components: {
      PhoneLoginForm,
      PasswordLoginForm,
      RegisterForm,
    },
    data () {
      return {
        constants,

        is_auth_modal_visible: true,
        active_auth_form_name: constants.phone_login_form,
      }
    },
    methods: {
      showAuthModal () {
        this.is_auth_modal_visible = true
      },
      hideAuthModal () {
        this.is_auth_modal_visible = false
      },
      switchAuthForm(nextForm) {
        this.active_auth_form_name = nextForm
      },
      handleFormSubmittedSuccessful() {
        this.hideAuthModal()
      }
    },
  }
</script>
